<template>
    <view class="rx-center">
        <view class="rx-title" v-if="portal.titleflg == true && portal.title !=''">{{getI18nTitleVal(portal, 'title')}}</view>
        <view v-if="portal.stylize!='card'" class="rx-application">
            <view class="rx-application-en" @click="portalJump(obj)" v-for="obj in portal.items">
                <view class="rx-application-icon" v-if="portal.stylize=='img'">
                    <image v-if="obj.imgId" :src="imageUrl(obj.imgId)" alt="photo"/>
                    <image v-else src="@/static/mobile.png"/>
                </view>
                <view v-else-if="portal.stylize=='iconfont'" :style="{'background':obj.bgColor}" class="rx-application-icon">
                    <i :class="['iconfont',obj.icon]"></i>
                    <view class="rx-myTasks" v-if="obj.routeName =='myTasks'">{{ myTaskNumber>99?'99+':myTaskNumber }}</view>
                </view>
                <span class="rx-application-span">{{ getI18nTitleVal(obj, 'title') }}</span>
            </view>
        </view>
        <view class="rx-card" :style="{'padding-top':portal.titleflg == true && portal.title !=''?'0rem':'1rem'}" v-if="portal.stylize=='card'">
            <view class="rx-card-list" @click="portalJump(item)" v-for="item in portal.items">
                <view class="rx-card-bgColor" :style="{'background':item.bgColor}"></view>
                <view class="rx-card-center">
                    <view class="rx-card-span">
                        <span :style="{'color':gradient(item.bgColor,0)}">{{item.title}}</span>
                        <span :style="{'color':gradient(item.bgColor,1)}">{{item.notes}}</span>
                    </view>
                    <i :style="{'color':gradient(item.bgColor,0),'font-size':'2.5rem'}" :class="['iconfont',item.icon]"></i>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/*
**栏目
 */
import './RxGatewayCss.css'
import TokenUtil from "@/common/TokenUtil";
export default {
    name: "RxGrid",
    inject: ['portalJump'],
    data() {
        return {}
    },
    props: {
        portal: Object,
    },
    methods: {
        getFilePath(fileId) {
            let token = TokenUtil.getToken();
            return "/api/api-system/system/core/sysFile/previewFile?fileId=" + fileId + "&accessToken=" + token;
        },
        gradient(item,nv){
            let gradientString = item;
            let colorRegex = /#([A-Fa-f0-9]{6})(\s+\d+%)?/g;
            let matches = [];
            let match;
            while ((match = colorRegex.exec(gradientString)) !== null) {
                matches.push(match[1]);
            }
            let color =matches[nv]?matches[nv]:matches[0]
            return '#'+color
        }
    }
}
</script>

<style scoped>
.rx-title {
    font-size: 1rem;
    padding: 0.7rem 1rem;
    letter-spacing: 0rem;
    color: rgba(51, 51, 51, 1);
}
.rx-center {
    border-radius: .5rem;
    background: #fff;
    width: calc(100% - 1rem);
    margin: 0.5rem auto;
    box-shadow: 0rem 0rem 0.2rem 0rem #dce0eb;
}
</style>
